<template>
  <div>
    <input 
        :placeholder="placeholder" 
        v-model="value"/>
    <button @click="addTodo">提交</button>
  </div>
</template>

<script>
export default {
    name: 'TodoInput',
    props: {
        placeholder: String
  },
  data() {
    return {
        value:''
      }
    },
  methods: {
    // addTodo() {
    //   this.$emit('addTodo', {
    //     id: new Date().getTime(),
    //     content: this.value,
    //     completed: false
    //   });
    //   this.value = '';
    // }
    addTodo() {
      this.$emit('dispatch','ADD_TODO', {
        id: new Date().getTime(),
        content: this.value,
        completed: false
      });
      this.value = '';
    }
  }
}
</script>

<style>

</style>